<template>
  <div class="com-checkbox" :class="{'on':active,'disabled':disabled}" @click="updateVal">
    <input type="checkbox" ref="checkbox" :value="value"  :disabled="disabled">
    <div class="com-checkbox-label" v-if="label">{{label}}</div>
  </div>
</template>
<script>
export default {
  name:'ui-checkbox',
  model: {
    prop: 'model',
    event: 'change'
  },
  props:{
    value:{},
    model:{//这里的model指的是上面定义的v-model的prop
      type:[String,Number,Array],
    },
     checked:{//是否默认选中
      type:Boolean,
      default:false
    },
    disabled:{//是否禁用
      type:Boolean,
      default:false
    },
    label:String
  },
  mounted(){
    if(this.checked===true)
      this.updateVal();
  },
  computed:{
    active(){
      if(toString.call(this.model) === '[object Array]'){
        return this.model.some(item=>item==this.value);
      }else{
        return this.model == this.value;
      }
    }
  },
  methods:{
    updateVal(){
      let rs = this.model;
      if(toString.call(this.model) === '[object Array]'){
        let idx = this.model.indexOf(this.value);
        if(idx == -1){
          rs.push(this.value)
        }else{
          rs.splice(idx,1);
        }
      }else{
        rs = this.$refs.checkbox.value;
      }
      this.$emit('change',rs);
    }
  }
}
</script>
<style lang="less" scoped>
.com-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding:15px 34px;
  border:2px solid #bec2cc;
  border-radius: 4px;
  font-size:28px;
  line-height: 1;
  color:#292929;

  input {
    position: absolute;
    top:0;
    left:0;
    opacity: 0;
    width:100%;
    height:100%;
  }

  .com-checkbox-label {
    font-size: 28px;
    color:#292929;
  }

  &.on {
    border-color:#2086f9;
    background-color:#f1f8ff;
    .com-checkbox-label {
      color:#2086f9;
    }
  }

}
</style>

